<template>
  <div class="c-bg-sgray">
    <div class="c-hh300 c-w100 bg-promotion-top c-pl64 pr216 c-pt128">
      <div class="c-fs40 c-fw600 c-fc-xlblown c-ws-n c-text-ellipsis1">{{upgradeProcessInfo.serviceProviderName}}</div>
      <div class="c-fs20 c-fc-xlblown c-mt8 c-ws-n c-text-ellipsis1">{{upgradeProcessInfo.vipType}}</div>
    </div>
    <div v-for="(item, index) in upgradeProcessArr" :key="index" :class="index == 0 ? 'c-mt20' : 'c-mt36'" class="c-ph24">
      <div class="c-fs26 c-fc-xblack">晋级级别：<span class="c-fw600">{{item.vipType}}</span></div>
      <div class="c-p c-ph24 c-pt24 c-pb16 c-bg-white c-br20 c-mt20">
        <div class="c-fs20 c-fc-white c-hh64 c-pl30 c-pr16 c-lh56 c-pa c-p-t0 c-p-r0" :class="item.status == 0 ? 'bg-unfinish' : 'bg-finish'">{{item.status == 0 ? '未完成' : item.status == 1 ?'已完成(审核中)' : '已完成'}}</div>
        <div class="c-fs22 c-fc-sblack c-pb24 c-bd-b1-f6"><span class="iconfont c-fs22 c-fc-sblack c-mr12">&#xe718;</span>晋级条件：{{item.applyRequire == 0 ? '满足以下任一条件' : '满足以下全部条件'}}</div>
        <div v-for="(sItem, sIndex) in item.upgradeDetail" :key="sIndex" class="c-flex-row c-aligni-start c-pv24">
          <div class="c-fs24 c-fc-xblack  c-fw600">{{sIndex + 1}}、</div>
          <div class="c-w0 c-flex-grow1">
            <div class="c-fs24 c-fc-xblack  c-fw600">{{sItem.title}}：<span class="c-fc-sblown c-fw600">{{sItem.totalCount}}{{sItem.processType == 1 || sItem.processType == 2 ? '元' : '个'}}</span></div>
            <div class="c-hh8 c-bg-f6 c-br6 c-mt20 c-mr28">
              <div class="c-hh8 c-br6 bg-spink" :style="'width:' + (Number(sItem.progcessCount)/Number(sItem.totalCount) >= 1 ? '100%' : (Number(sItem.progcessCount)/Number(sItem.totalCount) * 100 + '%'))"></div>
            </div>
            <div class="c-fs20 c-fc-gray c-mt16">{{Number(sItem.progcessCount)/Number(sItem.totalCount) >= 1 ? '已完成' : ('距离这个等级还差' + sItem.remainderCount + (sItem.processType == 1 || sItem.processType == 2 ? '元' : '个'))}}</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :noData="!upgradeProcessArr || upgradeProcessArr.length == 0" noDataText="暂无相关内容"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'ConditionForPromotion',
  components: {
    loadingStatusTem
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      upgradeProcessInfo: '',
      upgradeProcessArr: [],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    getAgentUpgradeProcess: function () {
      utilJs.getMethod(global.apiurl + `AgentUpgrade/getAgentUpgradeProcess`, res => {
        this.upgradeProcessInfo = res;
        this.upgradeProcessArr = res.list;
        for (let i = 0; i < this.upgradeProcessArr.length; i++) {
          let processDetailArr = [];
          if (Number(this.upgradeProcessArr[i].consumeMoney) > 0) {
            processDetailArr.push({
              totalCount: this.upgradeProcessArr[i].consumeMoney,
              title: this.upgradeProcessArr[i].consumeMoneyName,
              progcessCount: this.upgradeProcessArr[i].consumeMoneyProcess,
              processType: 1,
              remainderCount: (Number(this.upgradeProcessArr[i].consumeMoney) - Number(this.upgradeProcessArr[i].consumeMoneyProcess)).toFixed(2)
            })
          }
          if (Number(this.upgradeProcessArr[i].refereeConsumeMoney) > 0) {
            processDetailArr.push({
              totalCount: this.upgradeProcessArr[i].refereeConsumeMoney,
              title: this.upgradeProcessArr[i].refereeConsumeName,
              progcessCount: this.upgradeProcessArr[i].refereeConsumeMoneyProcess,
              processType: 2,
              remainderCount: (Number(this.upgradeProcessArr[i].refereeConsumeMoney) - Number(this.upgradeProcessArr[i].refereeConsumeMoneyProcess)).toFixed(2)
            })
          }
          if (Number(this.upgradeProcessArr[i].refereeNum) > 0) {
            processDetailArr.push({
              totalCount: this.upgradeProcessArr[i].refereeNum,
              title: this.upgradeProcessArr[i].refereeNumName,
              progcessCount: this.upgradeProcessArr[i].refereeNumProcess,
              processType: 3,
              remainderCount: Number(this.upgradeProcessArr[i].refereeNum) - Number(this.upgradeProcessArr[i].refereeNumProcess)
            })
          }
          if (Number(this.upgradeProcessArr[i].refereeAgentNum) > 0) {
            processDetailArr.push({
              totalCount: this.upgradeProcessArr[i].refereeAgentNum,
              title: this.upgradeProcessArr[i].refereeAgentNumName,
              progcessCount: this.upgradeProcessArr[i].refereeAgentNumProcess,
              processType: 4,
              remainderCount: Number(this.upgradeProcessArr[i].refereeAgentNum) - Number(this.upgradeProcessArr[i].refereeAgentNumProcess)
            })
          }
          if (Number(this.upgradeProcessArr[i].vipOrderNum) > 0) {
            processDetailArr.push({
              totalCount: this.upgradeProcessArr[i].vipOrderNum,
              title: this.upgradeProcessArr[i].vipOrderNumName,
              progcessCount: this.upgradeProcessArr[i].vipOrderNumProcess,
              processType: 4,
              remainderCount: Number(this.upgradeProcessArr[i].vipOrderNum) - Number(this.upgradeProcessArr[i].vipOrderNumProcess)
            })
          }
          if (Number(this.upgradeProcessArr[i].svipOrderNum) > 0) {
            processDetailArr.push({
              totalCount: this.upgradeProcessArr[i].svipOrderNum,
              title: this.upgradeProcessArr[i].svipOrderNumName,
              progcessCount: this.upgradeProcessArr[i].svipOrderNumProcess,
              processType: 4,
              remainderCount: Number(this.upgradeProcessArr[i].svipOrderNum) - Number(this.upgradeProcessArr[i].svipOrderNumProcess)
            })
          }
          this.$set(this.upgradeProcessArr[i], 'upgradeDetail', processDetailArr);
        }
      })
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "自动升级条件", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("自动升级条件", "", shareUrl, "");
    },
  },
  activated() {
    setDocumentTitle("自动升级条件");// eslint-disable-line
    let vipType = localStorage.getItem(`vipType${localStorage.getItem("userId")}`);
    if (vipType == 1 || vipType == 2 || vipType == 4) {
      this.$routerGo(this, "replace", { path: "/homePage/agent/agentIndex" });
    }
    this.getAgentUpgradeProcess();
    this.wechatShare();
  },
  deactivated() {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg-promotion-top {
  background: url('../../../../src/assets/i/wap/newAreaAgent/promotionBg.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.bg-unfinish {
  background: url('../../../../src/assets/i/wap/newAreaAgent/unfinish.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.bg-finish {
  background: url('../../../../src/assets/i/wap/newAreaAgent/finish.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.pr216 {
  padding-right: 5.04rem;
}
.c-pt128 {
  padding-top: 3.02rem;
}
.bg-spink {
  background-color: #F5D199;
}
</style>
